<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>树表组件 treeTable - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>树表组件 <sup title="指在该版本新增的组件">2.8+</sup></h1>
<blockquote class="layui-elem-quote">
<p>树表组件 <code>treeTable</code> 是基于 <code>table</code> 组件延伸的树形表格组件，支持常见的树组件功能。</p>
</blockquote class="layui-elem-quote">
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<p>以下所有示例中演示的数据均为「静态模拟数据」，实际使用时换成您的真实接口即可。</p>
<div>
<h3 id="examples" lay-toc="{level: 2, hot: true, id: 'examples'}" class="layui-hide">综合演示</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '综合演示'}, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
  layui.table.resize('ID-treeTable-demo');
}, toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize('ID-treeTable-demo');
  }
}}">
  <textarea>
<table class="layui-hide" id="ID-treeTable-demo"></table>
<script type="text/html" id="TPL-treeTable-demo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
  </div>
</script>
<script type="text/html" id="TPL-treeTable-demo-tools">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
  </div>
</script>
<!-- import layui -->
<script>
layui.use(function(){
  var treeTable = layui.treeTable;
  var layer = layui.layer;
  var dropdown = layui.dropdown;
  // 渲染
  var inst = treeTable.render({
    elem: '#ID-treeTable-demo',
    url: '/static/2.8/json/treeTable/demo-1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    tree: {
      /*
      // 异步加载子节点
      async: {
        enable: true,
        url: '/static/2.8/json/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
        autoParam: ["parentId=id"]
      }
      */
    },
    maxHeight: '501px',
    toolbar: '#TPL-treeTable-demo',
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
      {field: 'name', title: '用户名', width: 180, fixed: 'left'},
      {field: 'experience', title: '积分', width: 90, sort: true},
      {field: 'sex', title: '性别', width: 80, sort: true},
      {field: 'score', title: '评分', width: 80, sort: true},
      {field: 'city', title: '城市'},
      { fixed: "right", title: "操作", width: 181, align: "center", toolbar: "#TPL-treeTable-demo-tools"} 
    ]],
    page: true
  });
  // 表头工具栏工具事件
  treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
    var config = obj.config;
    var tableId = config.id;
    var status = treeTable.checkStatus(tableId);
    // 获取选中行
    if (obj.event === "getChecked") {
      if(!status.data.length) return layer.msg('无选中数据');
      console.log(status);
      layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
    }
  });
  // 单元格工具事件
  treeTable.on('tool('+ inst.config.id +')', function (obj) {
    var layEvent = obj.event; // 获得 lay-event 对应的值
    var trElem = obj.tr;
    var trData = obj.data;
    var tableId = obj.config.id;
    if (layEvent === "detail") {
      layer.msg("查看操作：" + trData.name);
    } else if (layEvent === "addChild") {
      var data = { id: Date.now(), name: "新节点" };
      var newNode2 = treeTable.addNodes(tableId, {
        parentIndex: trData["LAY_DATA_INDEX"], 
        index: -1, 
        data: data
      });
    } else if (layEvent === "more") {
      // 下拉菜单
      dropdown.render({
        elem: this, // 触发事件的 DOM 对象
        show: true, // 外部事件触发即显示
        align: "right", // 右对齐弹出
        data: [
          {
            title: "修改积分",
            id: "edit"
          },
          {
            title: "删除",
            id: "del"
          }
        ],
        click: function (menudata) {
          if (menudata.id === "del") {
            layer.confirm("真的删除行么", function (index) {
              obj.del(); // 等效如下
              // treeTable.removeNode(tableId, trElem.attr('data-index'))
              layer.close(index);
            });
          } else if (menudata.id === "edit") {
            layer.prompt({
                value: trData.experience,
                title: "输入新的积分"
            }, function (value, index) {
              obj.update({ experience: value }); // 等效如下
              // treeTable.updateNode(tableId, trElem.attr('data-index'), {experience: value});
              layer.close(index);
            });
          }
        }
      });
    }
  });
});
</script>
  </textarea>
</pre>

</div>
<p></p>
<h2 id="api" lay-toc="{hot: true, bold: true}">API</h2>
<p><code>table</code> 组件的所有 <code>API</code> 均适用于 <code>treeTable</code> 组件。在此基础上，<code>treeTable</code> 还专门提供了以下方法：</p>
<table class="layui-table">
<thead>
<tr>
<th>API</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var treeTable = layui.treeTable;</td>
<td>获得 <code>treeTable</code> 模块。</td>
</tr>
<tr>
<td><a href="index.html#render">treeTable.render(options)</a></td>
<td>treeTable 组件渲染，核心方法。</td>
</tr>
<tr>
<td><a href="index.html#reload">treeTable.reload(id, options)</a></td>
<td>树表完整重载。</td>
</tr>
<tr>
<td><a href="index.html#reload">treeTable.reloadData(id, options)</a></td>
<td>树表数据重载。</td>
</tr>
<tr>
<td><a href="index.html#reloadAsyncNode">treeTable.reloadAsyncNode(id, index)</a></td>
<td>重载异步子节点</td>
</tr>
<tr>
<td><a href="index.html#getData">treeTable.getData(id, isSimpleData)</a></td>
<td>获取树表数据。</td>
</tr>
<tr>
<td><a href="index.html#getNodeById">treeTable.getNodeById(id)</a></td>
<td>获取节点信息集</td>
</tr>
<tr>
<td><a href="index.html#getNodesByFilter">treeTable.getNodesByFilter(id, filter, opts)</a></td>
<td>获取符合过滤规则的节点信息集</td>
</tr>
<tr>
<td><a href="index.html#getNodeDataByIndex">treeTable.getNodeDataByIndex(id, index)</a></td>
<td>通过行元素对应的 <code>data-index</code> 属性获取对应行数据。</td>
</tr>
<tr>
<td><a href="index.html#updateNode">treeTable.updateNode(id, index, data)</a></td>
<td>更新行数据。</td>
</tr>
<tr>
<td><a href="index.html#removeNode">treeTable.removeNode(id, index)</a></td>
<td>删除行记录。</td>
</tr>
<tr>
<td><a href="index.html#addNodes">treeTable.addNodes(id, opts)</a></td>
<td>新增行记录。</td>
</tr>
<tr>
<td><a href="index.html#expandNode">treeTable.expandNode(id, opts)</a></td>
<td>展开或关闭节点。</td>
</tr>
<tr>
<td><a href="index.html#expandAll">treeTable.expandAll(id, expandFlag)</a></td>
<td>展开或关闭全部节点。</td>
</tr>
<tr>
<td><a href="index.html#setRowChecked">treeTable.setRowChecked(id, opts)</a></td>
<td>设置行选中状态</td>
</tr>
<tr>
<td><a href="index.html#checkAllNodes">treeTable.checkAllNodes(id, checked)</a></td>
<td>全选或取消全选</td>
</tr>
<tr>
<td><a href="index.html#on">treeTable.on('event(filter)', callback)</a></td>
<td>treeTable 相关事件</td>
</tr>
</tbody>
</table class="layui-table">
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
<p><code>treeTable.render(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>该组件渲染的使用方式与 <code>table</code> 组件完全相同。</p>
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<p><code>table</code> 组件的所有基础属性均适用于 <code>treeTable</code> 组件。在此基础上，<code>treeTable</code> 还专门提供了 <code>tree</code> 属性集：</p>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>tree</td>
<td>
<p>treeTable 组件的特定属性集，包含以下「子成员集」：</p>
<table class="layui-table">
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="index.html#options.tree.customName">customName</a></td>
<td>自定义属性名的集合</td>
</tr>
<tr>
<td><a href="index.html#options.tree.view">view</a></td>
<td>视图相关的属性集合</td>
</tr>
<tr>
<td><a href="index.html#options.tree.data">data</a></td>
<td>数据相关的属性集合</td>
</tr>
<tr>
<td><a href="index.html#options.tree.async">async</a></td>
<td>异步相关的属性集合</td>
</tr>
<tr>
<td><a href="index.html#options.tree.callback">callback</a></td>
<td>事件回调相关的属性集合</td>
</tr>
</tbody>
</table class="layui-table">
<p>用法如下：</p>
<pre><code class="layui-code language-js">treeTable.render({
  elem: '',
  tree: { // treeTable 特定属性集
    customName: {},
    data: {},
    view: {},
    async: {},
    callback: {}
  },
  // 其他 table 属性
});
</code></pre>
</td>
    </tr>
    <tr>
<td>tree.customName</td>
<td>
<div id="options.tree.customName" lay-pid="options" class="ws-anchor">
<p>自定义属性名的集合，包含以下成员：</p>
</div>
<table class="layui-table">
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>children</td>
<td>自定义「子节点集合」的属性名</td>
<td>string</td>
<td><code>children</code></td>
</tr>
<tr>
<td>isParent</td>
<td>自定义「是否属于父节点」的属性名</td>
<td>string</td>
<td><code>isParent</code></td>
</tr>
<tr>
<td>name</td>
<td>自定义「节点」属性名</td>
<td>string</td>
<td><code>name</code></td>
</tr>
<tr>
<td>id</td>
<td>自定义「节点索引」属性名</td>
<td>string</td>
<td><code>id</code></td>
</tr>
<tr>
<td>pid</td>
<td>自定义「父节点索引」属性名</td>
<td>string</td>
<td><code>parentId</code></td>
</tr>
<tr>
<td>icon</td>
<td>自定义图标的属性名称</td>
<td>string</td>
<td><code>icon</code></td>
</tr>
</tbody>
</table class="layui-table">
</td>
    </tr>
    <tr>
<td>tree.view</td>
<td>
<div id="options.tree.view" lay-pid="options" class="ws-anchor">
<p>视图相关的属性集合，包含以下成员：</p>
</div>
<table class="layui-table">
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>indent</td>
<td>层级缩进量</td>
<td>number</td>
<td><code>14</code></td>
</tr>
<tr>
<td>flexIconClose</td>
<td>关闭时的折叠图标</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>flexIconOpen</td>
<td>打开时的折叠图标</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>showIcon</td>
<td>是否显示节点图标</td>
<td>boolean</td>
<td><code>true</code></td>
</tr>
<tr>
<td>icon</td>
<td>自定义节点图标。若设置了该属性或数据中有该字段信息，不管打开还是关闭都以这个图标的值为准</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>iconClose</td>
<td>自定义关闭时的节点图标</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>iconOpen</td>
<td>自定义打开时的节点图标</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>iconLeaf</td>
<td>叶子节点的图标</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>showFlexIconIfNotParent</td>
<td>若非父节点时，是否显示折叠图标</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td>dblClickExpand</td>
<td>双击节点时，是否自动展开父节点</td>
<td>boolean</td>
<td><code>true</code></td>
</tr>
</tbody>
</table class="layui-table">
</td>
    </tr>
    <tr>
<td>tree.data</td>
<td>
<div id="options.tree.data" lay-pid="options" class="ws-anchor">
<p>数据相关的属性集合，包含以下成员：</p>
</div>
<table class="layui-table">
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>isSimpleData</td>
<td>是否简单数据模式</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td>rootPid</td>
<td>用于设置根节点的 <code>pid</code> 属性值</td>
<td>string</td>
<td><code>null</code></td>
</tr>
</tbody>
</table class="layui-table">
</td>
    </tr>
    <tr>
<td>tree.async</td>
<td>
<div id="options.tree.async" lay-pid="options" class="ws-anchor">
<p>异步相关的属性集合，包含以下成员：</p>
</div>
<table class="layui-table">
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>enable</td>
<td>是否开启异步加载模式。只有开启时 <code>async</code> 的其他属性配置才有效。 <strong>注意：</strong> 异步加载子节点不应跟 <code>simpleData</code> 同时开启，可以是 <code>url+simpleData</code> 的方式，获取完整的简单数据进行转换。若开启异步加载模式，即表示按需异步加载子节点。</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td>url</td>
<td>异步加载的接口，可以根据需要设置与顶层接口不同的接口，若相同可不设置该属性</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td><a href="index.html#options.tree.async.format">format</a></td>
<td>用于处理异步子节点数据的回调函数，该属性优先级高于 <code>async.url</code> 属性。用法详见下文。</td>
<td>function</td>
<td>-</td>
</tr>
<tr>
<td>type</td>
<td>请求的接口类型，设置可缺省同上</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>contentType</td>
<td>提交参数的数据类型，设置可缺省同上</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>headers</td>
<td>提交请求头，设置可缺省同上</td>
<td>object</td>
<td>-</td>
</tr>
<tr>
<td>where</td>
<td>提交参数的数据，设置可缺省同上</td>
<td>object</td>
<td>-</td>
</tr>
<tr>
<td>autoParam</td>
<td>自动参数，可以根据配置项以及当前节点的数据传参，如： <code>['type', 'age=age', 'parentId=id']</code> ，那么其请求参数将包含: <code>{type: '父节点 type', age: '父节点 age', parentId: '父节点 id'}</code></td>
<td>array</td>
<td>-</td>
</tr>
</tbody>
</table class="layui-table">
<div id="options.tree.async.format" class="ws-anchor">
<p><strong>format 示例</strong> ：</p>
</div>
<pre><code class="layui-code">treeTable.render({
  elem: '',
  treee: {
    enable: true,
    async: {
      format: function(trData, options, callback){
        // trData 为行数据、options 为 treeTable 属性配置项
        // callbacck 为子节点的渲染函数
        // 可利用该函数对子节点数据进行异步请求或其他格式化处理
        var nodeList = [
          {id: 111, name: '子节点1'},
          {id: 333, name: '子节点3'}
        ];
        callback(nodeList);
      }
    }
  }
})
</code></pre>
</td>
    </tr>
    <tr>
<td>tree.callback</td>
<td>
<div id="options.tree.callback" lay-pid="options" class="ws-anchor">
<p>事件回调相关的属性集合，包含以下成员：</p>
</div>
<table class="layui-table">
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>beforeExpand</td>
<td>展开前回调函数。可以在展开或者关闭之前调用，传入当前表格 <code>id</code> ，当前操作的行数据以及要展开或关闭的状态，若回调返回 <code>false</code> 则取消该次操作。 返回的参数包含： <code>function(tableId, trData, expandFlag){ console.log(arguments); }</code></td>
</tr>
<tr>
<td>onExpand</td>
<td>展开或关闭后的回调函数，返回参数同 <code>beforeExpand</code></td>
</tr>
</tbody>
</table class="layui-table">
</td>
    </tr>
  </tbody>
</table>
</div>
<h3 id="reload" lay-toc="{level: 2}">重载</h3>
<p>即对一段已经渲染好的表格重新设置属性并渲染，可分为以下几种重载方式：</p>
<table class="layui-table">
<thead>
<tr>
<th>重载方式</th>
<th>API</th>
</tr>
</thead>
<tbody>
<tr>
<td>完整重载</td>
<td>treeTable.reload(id, options)</td>
</tr>
<tr>
<td>仅数据重载</td>
<td>treeTable.reloadData(id, options)</td>
</tr>
</tbody>
</table class="layui-table">
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 id 属性值</li>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>使用方式与 <code>table</code> 组件完全相同，具体用法可参考：<a href="../table/index.html#reload">table 重载</a></p>
<h3 id="reloadAsyncNode" class="ws-anchor ws-bold">重载异步子节点</h3>
<p><code>treeTable.reloadAsyncNode(id, index)</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 id 属性值</li>
<li>参数 <code>index</code> : 节点对应的行下标，一般可通过 <code>&lt;tr&gt;</code> 元素的 <code>data-index</code> 属性获得</li>
</ul>
<p>该方法用于在异步模式下，对节点进行重载。</p>
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  async: {
    enable: true // 开启异步加载模式
  }
  // 其他属性 …
});
// 重载子节点
treeTable.reloadAsyncNode('test', 0); // 第一行
</code></pre>
<h3 id="getData" lay-pid="api" class="ws-anchor ws-bold">获取树表数据</h3>
<p><code>treeTable.getData(id, isSimpleData);</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 id 属性值</li>
<li>参数 <code>isSimpleData</code> : 是否为简单数据，为 <code>true</code> 时返回简单数据结构的数据，否则则为带层级的数据</li>
</ul>
<p>该方法用于获取表格当前页的全部数据，它对应的是接口返回的原始数据，不包含 <code>treeTable</code> 组件内部的特定字段。</p>
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取当前页接口的树表数据
var data = treeTable.getData('test'); // 获取第一行的数据
console.log(data);
</code></pre>
<h3 id="getNodeById" lay-pid="api" class="ws-anchor ws-bold">获取节点信息集</h3>
<p><code>treeTable.getNodeById(id)</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 <code>id</code> 属性值</li>
</ul>
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取节点信息集
var obj = treeTable.getNodeById('test');
console.log(obj);
</code></pre>
<h3 id="getNodesByFilter" lay-pid="api" class="ws-anchor ws-bold">获取符合过滤规则的节点信息集</h3>
<p><code>treeTable.getNodesByFilter(id, filter, opts)</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>filter</code> : 过滤函数</li>
<li>参数 <code>opts</code> : 该方法的属性可选项，详见下表：</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>属性名</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>isSingle</td>
<td>是否只找到第一个</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td>parentNode</td>
<td>在指定在某个父节点下的子节点中搜索</td>
<td>object</td>
<td>-</td>
</tr>
</tbody>
</table class="layui-table">
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取节点信息集
var obj = treeTable.getNodesByFilter('test', function(item){
  // 自定义过滤条件
  return item.id &gt; 1000;
});
console.log(obj);
</code></pre>
<h3 id="getNodeDataByIndex" lay-pid="api" class="ws-anchor ws-bold">获取树表对应下标的数据</h3>
<p><code>treeTable.getNodeDataByIndex(id, index);</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>index</code> : 节点对应的行下标，一般可通过 <code>&lt;tr&gt;</code> 元素的 <code>data-index</code> 属性获得</li>
</ul>
<p>该方法用于获取表格当前页对应下表的数据，返回的数据格式同 <code>treeTable.getData()</code> 方法。</p>
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取树表对应下标的数据
var obj = treeTable.getNodeDataByIndex('test', 0); // 获取第一行的数据
console.log(obj);
</code></pre>
<h3 id="updateNode" lay-pid="api" class="ws-anchor ws-bold">更新行数据</h3>
<p><code>treeTable.updateNode(id, index, data);</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 id 属性值</li>
<li>参数 <code>index</code> : 节点对应的行下标，一般可通过 <code>&lt;tr&gt;</code> 元素的 <code>data-index</code> 属性获得</li>
<li>参数 <code>data</code> : 更新的数据项，可包含要更新的各种字段</li>
</ul>
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 更新行数据
var data = treeTable.updateNode('test', 0, {  // 更新第一行的数据
  title: '123'
});
</code></pre>
<h3 id="removeNode" lay-pid="api" class="ws-anchor ws-bold">删除行记录</h3>
<p><code>treeTable.removeNode(id, index);</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>index/node</code> : 要删除的节点数据，也可以是节点对应的行下标（ <code>data-index</code>）</li>
</ul>
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 删除行记录
treeTable.removeNode('test', 0); // 删除第一行
</code></pre>
<h3 id="addNodes" lay-pid="api" class="ws-anchor ws-bold">新增行数据</h3>
<p><code>treeTable.addNodes(id, opts);</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>opts</code> : 该方法可支持的可选属性项，详见下表：</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>opts</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>parentIndex</td>
<td>父节点数据下标</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>index</td>
<td>节点对应的行下标。若为 <code>-1</code> 表示插入到最后，否则则插入到对应下标。</td>
<td>number</td>
<td><code>-1</code></td>
</tr>
<tr>
<td>data</td>
<td>新增的节点数据项。若新增的是多个节点，则用数组的形式。若只有一个节点可以是普通对象形式</td>
<td>object</td>
<td>-</td>
</tr>
<tr>
<td>focus</td>
<td>是否聚焦到新增的节点。若存在多个，则聚焦到第一个新增的节点</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
</tbody>
</table class="layui-table">
<p>该方法可返回新增后的数据项。详细用法可参考：<a href="index.html#examples">#示例</a></p>
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 新增行数据
treeTable.addNodes('test', {
  parentIndex: 0, // 一般在 tool 事件中，可通过对应数据项中的 `LAY_DATA_INDEX` 特定属性获得
  index: 1,
  data: {
    title: '新节点-1'
  }
});
</code></pre>
<h3 id="expandNode" lay-pid="api" class="ws-anchor ws-bold">展开或关闭节点</h3>
<p><code>treeTable.expandNode(id, opts);</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>opts</code> : 该方法可支持的可选属性项，详见下表：</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>opts</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>index</td>
<td>节点对应的行下标，一般可通过 <code>&lt;tr&gt;</code> 元素的 <code>data-index</code> 属性获得</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>expandFlag</td>
<td>设置展开或关闭状态，若为 <code>true</code> 则表示展开；<code>false</code> 则为关闭；<code>null</code> 则表示切换</td>
<td>boolean/null</td>
<td>-</td>
</tr>
<tr>
<td>inherit</td>
<td>子节点是否继承父节点的展开或关闭状态，<code>expandFlag</code> 属性必须为 <code>boolean</code> 型时才有效。</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td>callbackFlag</td>
<td>是否触发事件（<code>beforeExpand,onExpand</code>）</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
</tbody>
</table class="layui-table">
<p>若操作的节点不是一个父节点，则返回 <code>null</code>，否则返回操作之后的折叠状态。</p>
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 展开或关闭对应节点
treeTable.expandNode('test', {
  index: 0, // 第一行
  expandFlag: true // 展开
});
</code></pre>
<h3 id="expandAll" lay-pid="api" class="ws-anchor ws-bold">展开或关闭全部节点</h3>
<p><code>treeTable.expandAll(id, expandFlag);</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>expandFlag</code> : 折叠状态。 <code>true</code> 展开；<code>false</code> 关闭</li>
</ul>
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 展开或关闭全部节点
treeTable.expandAll('test', false); // 关闭全部节点
</code></pre>
<h3 id="setRowChecked" lay-pid="api" class="ws-anchor ws-bold">设置行选中状态</h3>
<p><code>treeTable.setRowChecked(id, opts);</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>opts</code> : 该方法可支持的可选属性项，详见下表：</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>opts</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>index</td>
<td>要设置选中状态的行下标或行数据</td>
<td>number/object</td>
<td>-</td>
</tr>
<tr>
<td>checked</td>
<td>选中状态。<code>true</code> 选中；<code>false</code> 取消选中；<code>null</code> 切换。 其中，所为 <code>radio</code> 框，则不支持 <code>null</code>(切换)。</td>
<td>boolean</td>
<td>-</td>
</tr>
<tr>
<td>callbackFlag</td>
<td>是否触发事件，若为 <code>true</code>，则 <code>checked: false</code> 无效。其对应的事件跟 <code>table</code> 的 <code>radio,checkbox</code> 事件用法一样</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
</tbody>
</table class="layui-table">
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 勾选或取消勾选单个节点
treeTable.setRowChecked('test', {
  index: 0,
  checked: true // 选中
}); 
</code></pre>
<h3 id="checkAllNodes" lay-pid="api" class="ws-anchor ws-bold">设置全选或取消全选</h3>
<p><code>treeTable.checkAllNodes(id, checked);</code></p>
<ul>
<li>参数 <code>id</code> : treeTable 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>checked</code> : 选中状态。<code>true</code> 选中；<code>false</code> 取消选中；<code>null</code> 复选框模式时的切换。</li>
</ul>
<pre><code class="layui-code language-js">// 渲染
treeTable.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 勾选或取消勾选单个节点
treeTable.checkAllNodes('test', true);  // 全选 
</code></pre>
<h3 id="on" lay-toc="{level: 2}">事件</h3>
<p><code>treeTable.on('event(filter)', callback);</code></p>
<p><code>treeTable</code> 事件继承于 <code>table</code> 事件，具体使用方法可参考：<a href="../table/index.html#table.on">#table 事件</a></p>
<h2>贴士</h2>
<blockquote class="layui-elem-quote">
<p><code>treeTable</code> 基于 <code>table</code> 组件扩展而来，因此，熟练运用 <code>treeTable</code> 的前提是熟悉 <code>table</code> 组件。 亦可通过 <code>table</code> 提供的基础 <code>API</code> 操作 <code>treeTable</code> 组件，但 <code>treeTable</code> 无法操作 <code>table</code>。</p>
</blockquote class="layui-elem-quote">

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/treeTable/index.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>